<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Document</title>
		<style>

			* {
				padding: 0;
				margin: 0;
			}

			html, body {
				height: 100%;
				/*min-height: 900px;*/
			}

			.box {
				height: 100%;
				/*background: yellow;*/
				position: relative;
				background-image: linear-gradient(to bottom, skyblue, white);
			}

			.sun {
				position: absolute;
				width: 200px;
				height: 200px;
				background-image: radial-gradient(circle at right top, red, yellow);
				right: 0;
				top: 0;
				border-bottom-left-radius: 200px;
				box-shadow: 0px 0px 100px 20px gold;
			}

			.hill1, .hill2, .hill3 {
				position: fixed;
				width: 800px;
				height: 600px;
				background-color: red;
				border-top-left-radius: 150%;
				transform: rotate(40deg);
				bottom: 80px;
				background-image: linear-gradient(to right bottom, cyan, green);
			}

			.hill2 {
				width: 600px;
				height: 600px;
				border-top-left-radius: 20%;
				left: 400px;
				background-image: linear-gradient(to right bottom, cyan, black);
				bottom: 60px;
			}

			.hill3 {
				right: 0;
				border-top-left-radius: 80%;
			}

			.road {
				position: absolute;
				height: 400px;
				width: 100%;
				bottom: 0;
				background-color: #71797C;
			}

			.line {
				height: 30px;
				position: absolute;
				width: 100%;
				background-image: repeating-linear-gradient(to right, transparent 0, transparent 10%, white 10%, white 20%);
				top: 0;
				bottom: 0;
				margin: auto;
			}

			.grass {
				position: absolute;
				width: 100%;
				height: 30px;
				bottom: 400px;
				background-image: linear-gradient(to right bottom, transparent 0, transparent 20px, green 20px, green 40px);
				background-size: 40px 40px;
				animation: move 2s linear infinite alternate;
			}

			.car {
				width: 272px;
				height: 117px;
				background-image: url("che.png");
				position: absolute;
				animation: run 1s linear infinite;
			}

			img {
				position: absolute;
				animation: roll .1s linear infinite;
			}

			.car>img:first-child {
				left: 23px;
				top: 64px;
			}

			.car>img:last-child {
				top: 64px;
				left: 190px;
			}



			@keyframes move {
				from {
					transform: skewX(-45deg);
				}

				to {
					transform: skewX(45deg);
				}
			}

			@keyframes roll {
				from {
					transform: rotate(0deg);
				}
				to {
					transform: rotate(360deg);
				}
			}

			@keyframes run {
				from {
					top: 0;
					left: 0;
				}

				25% {
					top: 283px;
					left: 25%;
				}

				50% {
					top: 0;
					left: 50%;
				}

				75% {
					top: 283px;
					left: 75%;
				}

				100% {
					top: 0;
					left: 100%;
				}
			}


		</style>
	</head>
	<body>
		
		<div class="box">
			<div class="sun"></div>
			<div class="hill1"></div>
			<div class="hill2"></div>
			<div class="hill3"></div>
			<div class="grass"></div>
			<div class="road">
				<div class="line"></div>
				<div class="car">
					<img src="lun.png" alt=""><img src="lun.png" alt="">
				</div>
			</div>

		</div>
		
		
	</body>
</html>